<template>
  <div
    class="produ-tags"
    @mouseenter="bIsAddBtnShow = true"
    @mouseleave="bIsAddBtnShow = false"
  >
    <p>
      <!-- tag list -->
      <Tag
        v-for="(tagItem, tagKey) in tags"
        :key="tagKey"
        :text="tagItem"
        :canClose="isBtnShow && _isTagTypeCanClose(tagKey)"
        :color="_getTagColor(tagKey)"
        @close="onDel(tagKey)"
      >
      </Tag>

      <!-- no tag -->
      <i v-if="!tags" class="no-tags el-icon-s-flag"></i>

      <!-- add tag btn -->
      <span
        v-if="bIsAddBtnShow && isBtnShow"
        class="produ-tags-add-area"
        @mouseleave="bIsTagsListLayoutShow = false"
      >
        <i class="button-new-tag" @click="onShowTagsList">+</i>
        <div v-if="bIsTagsListLayoutShow" class="produ-tags-add-area-dialog">
          <el-card>
            <template #header>
              <span>标签列表</span>
            </template>
            <div class="produ-tags-add-area-dialog-layout">
              <el-button
                v-for="tagItem in tagAddList"
                :key="tagItem.id"
                class="produ-tags-add-area-dialog-layout-item"
                @click="onAdd(tagItem)"
                size="small"
                :type="_bIsTagExist(tagItem.id) ? 'primary' : 'default'"
                round
              >
                {{ tagItem.name }}
              </el-button>
              <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
            </div>
          </el-card>
        </div>
      </span>
    </p>
  </div>
</template>

<script>
import Tag from "@/views/child/admin/common/tag/tag.vue";
import { isObject } from "@/utils/public";
import { Colors, Random_colors } from "@/utils/colors";
import { ElMessage } from "element-plus";
import { useWebDataAnalysisStore } from "@/store/web/data-analysis";

const useWebDataAnalysis = useWebDataAnalysisStore();
export default {
  name: "produTags",
  data() {
    return {
      /* tag */
      bIsAddBtnShow: false, // 内部控制是否显示
      tags: null,
      bIsTagsListLayoutShow: false,
      tagColors: {},
    };
  },
  props: ["item", "isBtnShow"], // isBtnShow 外部控制是否显示
  computed: {
    tagAddList() {
      return useWebDataAnalysis.tagAddList;
    },
    _getTagColor() {
      return (tagKey) => {
        switch (tagKey) {
          case "10": // 正式
            return Colors.blue;
          case "11": // 复用
            return Colors.green;
          case "12": // 模板
            return Colors.orange;
          case "14": // 测试
            return Colors.red;
          case "15": // 废弃
            return Colors.grey;
          case "159": // PC
            return Colors.normal;
          case "160": // H5
            return Colors.normal;
          case "162": // Card
            return Colors.normal;
          default:
            if (!this.tagColors[tagKey]) this.setTagColor(tagKey);
            return this.tagColors[tagKey];
        }
      };
    },
    _isTagTypeCanClose() {
      return (tagKey) => {
        return tagKey != "160" && tagKey != "162" && tagKey != "159";
      };
    },
    _tagExistArr() {
      return (this.tags && Object.keys(this.tags)) || [];
    },
    _bIsTagExist() {
      return (id) => this._tagExistArr.indexOf(id) > -1;
    },
  },
  components: {
    Tag,
  },
  mounted() {
    // 1. tags
    if (this.item && isObject(this.item.tags) && this.item.tags != {})
      this.tags = this.item.tags;
    else this.tags = null;
  },
  methods: {
    // methods
    setTagColor(key) {
      this.tagColors[key] =
        Random_colors[Math.floor(Math.random() * Random_colors.length)];
    },

    // add
    onShowTagsList() {
      let that = this;
      this.bIsTagsListLayoutShow = !this.bIsTagsListLayoutShow;
      if (this.tagAddList.length <= 0) useWebDataAnalysis.getTaglist();
    },
    onAdd(tagItem) {
      // 1. tag exist, show warning, and return
      if (this._bIsTagExist(tagItem.id)) {
        ElMessage({
          showClose: true,
          message: "标签已存在～",
          type: "warning",
        });

        return;
      }

      // 2. add tag
      let that = this;
      // 替换下哇
      useWebDataAnalysis.addTag({
        site_id: this.item.site_id,
        tag_id: tagItem.id,
        callback: (res) => {
          if (res && res.code == 0) {
            let _tags = _.cloneDeep(that.tags);
            if (!_tags) _tags = {};
            _tags[tagItem.id] = tagItem.name;
            that.tags = _tags;
          } else res && this.$message(res.msg);
        },
      });
    },
    onDel(tagKey) {
      let that = this;
      useWebDataAnalysis.deleteTag({
        site_id: this.item.site_id,
        tag_id: tagKey,
        callback: (res) => {
          if (res && res.code == 0) {
            let _tags = _.cloneDeep(that.tags);
            delete _tags[tagKey];
            if (JSON.stringify(_tags) == "{}") _tags = null;
            that.tags = _tags;
          } else res && this.$message(res.msg);
        },
      });
    },
  },
};
</script>

<style lang="scss">
.produ-tags {
  position: absolute;
  bottom: 2px;
  width: 100%;

  .button-new-tag {
    display: inline-block;
    text-align: center;
    font-style: normal;
    font-size: 14px;
    background: #fff;
    padding: 0 5px;
    cursor: pointer;
    border-radius: 4px;
    color: #666;
  }
  .no-tags {
    margin: 0 8px;
    font-size: 14px;
    color: #409eff;
  }
}

.produ-tags-add-area {
  position: relative;
  margin: 2px;

  .produ-tags-add-area-dialog {
    position: absolute;
    left: 50%;
    top: 22px;
    transform: translate(-50%, 0%);
    padding-top: 2px;
    // background: #fff;

    .produ-tags-add-area-dialog-layout {
      width: 210px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .produ-tags-add-area-dialog-layout-item {
        margin: 2px 5px;
        width: 60px;
      }

      i {
        width: 60px;
        margin: 0 5px;
      }
    }
  }
}
</style>
